<template>
  <view class="comb-container">
    <view class="comb-title">子组件B</view>
    <view class="comb-content">
      <text>CompA组件传进来的值：</text>
      <text class="comb-value">{{ result }}</text>
    </view>
    <view class="comb-callback">
      <text>回传值：</text>
      <input v-model="callbackValue" class="comb-input" />
      <button class="comb-btn" @click="sendOutside()">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return { result: '', callbackValue: '' }
  },
  created() {
    uni.$on('sendToComB', (val) => { this.result = val })
  },
  methods: {
    sendOutside() { this.$emit('callBackFun', this.callbackValue) }
  }
}
</script>

<style scoped>
.comb-container {
  background: #a5d6a7;
  padding: 15rpx;
  margin: 20rpx 0;
}
.comb-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.comb-content {
  font-size: 28rpx;
  margin-bottom: 15rpx;
}
.comb-value {
  color: blue;
  font-weight: bold;
  background: white;
  padding: 2rpx 5rpx;
}
.comb-callback {
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.comb-input {
  flex: 1;
  height: 40rpx;
  border: 1px solid #ccc;
  padding: 5rpx;
  margin: 0 10rpx;
  color: yellow;
}
.comb-btn {
  border: 1px solid #ccc;
  background: white;
  padding: 5rpx 10rpx;
  font-size: 26rpx;
}
</style>